{{ define "admin/index/main.html" }}
{{ template "public/header.html" .}}
<div id="app" class="page-content" :style="!urlobj.dialogstate ? 'margin-top:50px;':'margin-top:10px;'">
    <tab-tag v-if="!urlobj.dialogstate"></tab-tag>
<div class="home" style="margin:10px 15px 15px 15px;min-height:650px;" v-cloak>
    <el-row :gutter="24">
        <el-col :span="14">
            <el-card shadow="box-card">
                <el-row :gutter="15">
                    <el-col :xs="12" :sm="12" :md="12" :lg="6">
                        <el-card shadow="never">
                            <div style="padding:0">
                                <h1 style="font-size:150%;color:#909399; margin:0; padding:0">系统用户</h1>
                                <p style="float:left;color:#909399">10</p>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :xs="12" :sm="12" :md="12" :lg="6">
                        <el-card shadow="never">
                            <div style="padding:0">
                                <h1 style="font-size:150%;color:#909399; margin:0; padding:0">注册用户</h1>
                                <p style="float:left;color:#909399">20</p>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :xs="12" :sm="12" :md="12" :lg="6">
                        <el-card shadow="never">
                            <div style="padding:0">
                                <h1 style="font-size:150%;color:#909399; margin:0; padding:0">文章</h1>
                                <p style="float:left;color:#909399">10</p>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :xs="12" :sm="12" :md="12" :lg="6">
                        <el-card shadow="never">
                            <div style="padding:0">
                                <h1 style="font-size:150%;color:#909399; margin:0; padding:0">动态</h1>
                                <p style="float:left;color:#909399">40</p>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </el-card>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>注册用户</span>
                </div>
                <el-table
                        :data="tableData"
                        style="width: 100%"
                        :row-class-name="tableRowClassName">
                    <el-table-column
                            prop="date"
                            label="用户名">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="昵称">
                    </el-table-column>
                    <el-table-column
                            prop="sex"
                            label="性别">
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="登录次数">
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="最后登录时间">
                    </el-table-column>
                </el-table>
            </el-card>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>文章列表</span>
                </div>
                <el-table
                        :data="tableData"
                        style="width: 100%"
                        :row-class-name="tableRowClassName">
                    <el-table-column
                            prop="date"
                            label="文章标题"
                            width="400">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="分类">
                    </el-table-column>
                    <el-table-column
                            prop="sex"
                            label="访问量">
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="发布时间">
                    </el-table-column>
                </el-table>
            </el-card>
            <el-card class="box-card">
                <div slot="header" class="clearfix"><span>今日与昨日访问统计</span></div>
                <div>
                    <el-row :gutter="20">
                        <el-col :xs="24" :sm="24" :md="24" :lg="24">
                            <div id="myChart" style="width: 100%;height:170px;margin-bottom:10px"></div>
                        </el-col>
                    </el-row>
                </div>
            </el-card>
        </el-col>
        <el-col :span="10">
            <el-card shadow="never">
                <el-descriptions class="margin-top" title="系统信息" :column="2"  border>
                    <el-descriptions-item>
                        <template slot="label">
                            服务器系统
                        </template>
                        windows
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            go版本
                        </template>
                        1.21
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            上传附件限制
                        </template>
                        100M
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            执行时间限制
                        </template>
                        300s
                    </el-descriptions-item>
                </el-descriptions>
            </el-card>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>操作日志</span>
                </div>
                <el-timeline :reverse="reverse">
                    <el-timeline-item
                            v-for="(activity, index) in activities"
                            :key="index"
                            :timestamp="activity.timestamp">
                        {{ "{{activity.content}}" }}
                    </el-timeline-item>
                </el-timeline>
            </el-card>
        </el-col>
    </el-row>
</div>
</div>
<script src="/static/admin/js/app.js"></script>
<script src="/static/admin/js/echarts-all.js"></script>
<script src="/static/admin/js/macarons.js"></script>
<script>
    new Vue({
        el: '#app',
        data(){
            return {
                web_card_data: [],
                menus:[],
                echat_data:[],
                tableData: [{
                    date: 'tiedong',
                    name: '王小虎',
                    address: '上海市普陀区',
                    sex: '男',
                    login_num: 5,
                    login_time: '2024-05-14 12:23:34',
                }, {
                    date: 'tiedong1',
                    name: '王小虎',
                    address: '上海市普陀区',
                    sex: '男',
                    login_num: 6,
                    login_time: '2024-05-14 12:23:34',
                }, {
                    date: 'tiedong2',
                    name: '王小虎',
                    address: '上海市普陀区',
                    sex: '男',
                    login_num: 10,
                    login_time: '2024-05-14 12:23:34',
                }, {
                    date: 'tiedong3',
                    name: '王小虎',
                    address: '上海市普陀',
                    sex: '男',
                    login_num: 20,
                    login_time: '2024-05-14 12:23:34',
                }],
                reverse: true,
                activities: [{
                    content: '活动按期开始',
                    timestamp: '2018-04-15'
                }, {
                    content: '通过审核',
                    timestamp: '2018-04-13'
                }, {
                    content: '创建成功',
                    timestamp: '2018-04-11'
                },{
                    content: '创建成功',
                    timestamp: '2018-04-11'
                },{
                    content: '创建成功',
                    timestamp: '2018-04-11'
                },{
                    content: '创建成功',
                    timestamp: '2018-04-11'
                },{
                    content: '创建成功',
                    timestamp: '2018-04-11'
                },{
                    content: '创建成功',
                    timestamp: '2018-04-11'
                },{
                    content: '创建成功',
                    timestamp: '2018-04-11'
                },{
                    content: '创建成功',
                    timestamp: '2018-04-11'
                },{
                    content: '创建成功',
                    timestamp: '2018-04-11'
                }],
            }
        },
        mounted () {
            this.drawLine()
        },
        methods: {
            drawLine(){
                let myChart = echarts.init(document.getElementById('myChart'),'macarons')
                var xData = [];
                var yData1 = [];
                var yData2 = [];
                var ops = {
                    title: {
                        top: '12px',
                        text: '今日与昨日访问统计',
                        left: '10px',
                        textStyle: {
                            fontSize: '18',
                            color: '#333',
                        }
                    },
                    color: ["#1AAD19", "#1890FF"],
                    grid: {
                        left: '16px',
                        right: '30px',
                        bottom: '12px',
                        top: '60px',
                        containLabel: true
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    toolbox: {
                        show: true,
                    },
                    legend: {
                        data: ["今日", "昨日"],
                        top: '18px',
                    },
                    xAxis: [{
                        type: "category",
                        boundaryGap: !1,
                        data: xData,
                        axisLine: {
                            lineStyle: {
                                color: '#999999',
                                width: 1,
                            }
                        },
                    }],
                    yAxis: [{
                        type: "value",
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#999999',
                                width: 1,
                            }
                        },
                    }],
                    series: [{
                        name: "今日",
                        type: "line",
                        smooth: !0,
                        itemStyle: {
                            normal: {
                                areaStyle: {
                                    type: "default",
                                    opacity: 0.2
                                }
                            }
                        },
                        data: yData1
                    }, {
                        name: "昨日",
                        type: "line",
                        smooth: !0,
                        itemStyle: {
                            normal: {
                                areaStyle: {
                                    type: "default",
                                    opacity: 0.2
                                }
                            }
                        },
                        data: yData2
                    }]
                }
                myChart.setOption(ops);
            },
            tableRowClassName({row, rowIndex}) { //设置行的颜色
                return '';

            },
        },
    })
</script>
{{ template "public/footer.html" .}}
{{ end }}